.ol-admin {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    
    .ol-postiton{
        position: fixed;
        bottom: 0px;
        right: 0px;
        z-index: 9;
        width: 31.25rem;
        height: 1.5rem;
        background-color: #ffffffcc;
        /* font-family: auto; */
        font-weight: 400;
        color: #003A8C;
        font-size: 1rem;
        text-align: left;
        padding-left: 10px;
        .c-level{
            margin-right: 2.5rem;
        }

    }
}

.map {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    background-color: #bce0ffa8;
}


.map3D {
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: none;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: #bce0ffa8;
}

.onclik {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;
}



.c-img-module {
    z-index: 1;
    position: absolute;
    width: auto;
    height: 4vw;
    bottom: 24px;
    left: 24px;
    display: flex;
    cursor: pointer;

    .c-img-module-left {
        z-index: 3;
        width: 4vw;
        height: 4vw;
        padding: 0.2vw;
        border-radius: 0.5vw;
        background-color: rgba(255, 255, 255, 0.849);

        img {
            width: 100%;
            height: 100%;
            border-radius: 0.5vw;
        }
    }

    .c-img-module-right {
        z-index: 2;
        width: auto;
        height: 4vw;
        margin-left: 0.5vw;
        background-color: rgba(255, 255, 255, 0.829);
        border-radius: 0.5vw;
        display: flex;
        transition: 0.3s all;

        &>div {
            width: 4vw;
            height: 4vw;

            img {
                margin-top: 0.35vw;
                width: 70%;
                height: 70%;
                padding: 0.2vw;
                border-radius: 0.5vw;
            }

            &>div {
                margin-top: -0.15vw;
                font-size: 0.15vw;
                transform: scale(0.9);
            }
        }

    }

    .c-img-module-right-hide {
        margin-left: -5vw;
        opacity: 0;
    }
}

.c-search {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 15vw;
    height: auto;
    border-radius: 0.5vw;
    z-index: 3;
    background-color: white;

    .search-input {
        width: 100%;
        height: auto;
        padding: 0.5vw;
    }

    .search-item {
        width: 100%;
        height: auto;

        &>div {
            line-height: 100%;
            margin: 0.5vw;
            background-color: #e8e8e826;
            text-align: left;
            padding: 0.2vw;
            color: rgb(92, 92, 92);
            cursor: pointer;
        }
    }
}

.c-switch-ui {
    position: absolute;
    width: 14vw;
    height: 2vw;
    top: 2vw;
    left: 1vw;
    z-index: 2;
    background-color: white;
    box-shadow: 0 0 0.5vw #676767;
    border-radius: 0.2vw;
    display: flex;
    justify-content: center;
    align-items: center;

    &>div {
        flex: 1
    }
}

.c-tool {
    position: absolute;
    width: 2.5vw;
    height: auto;
    z-index: 1;
    right: 24px;
    top: 2vw;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.16);
    &>div {
       width: 1.5vw;
        height: 1.5vw;
        margin: 0.25vw 0.45vw;
    }
}



.c-icon {
    width: 80%;
    height: 80%;
    cursor: pointer;
}

.poput-text {
    position: absolute;
    width: 200px;
    height: 140px;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    z-index: 7;
    margin-left: -100px;
    margin-top: -220px;

    &>div:nth-child(1){
        height: 20px;
    }
    &>div:nth-child(2) {
        height: 20px;
        text-align: left;
        padding: 0 15px;
    }
    

    .overlay-over {
        width: 100%;
        height: 95px;
        overflow-y: scroll;
        overflow-x: hidden;
        text-align: left;
    }

    .overlay-over::-webkit-scrollbar {
        width: 2px;
    }
}

.drag-btn {
    position: absolute;
    width: 32%;
    height: 75%;
    cursor: pointer;
    z-index: 34;
    background: #83838300;
    top: 0;
    margin-left: 34%;
    border-radius: 5px;
    transition: 0.5s all;

    .btn-span {
        display: inline-block;
        width: 80%;
        height: 4px;
        background-color: rgba(180, 180, 180, 0.445);
        border-radius: 4px;
        transition: 0.5s all;
    }
}

.drag-btn:hover {
    background: #8383831f;

    .btn-span {
        background-color: rgb(12, 12, 12);
    }
}

// 特效UI菜单
.effects-ui-menu {
    position: absolute;
    z-index: 3;
    width: 40vw;
    height: 5vw;
    top: 1vw;
    left: 1vw;
    display: flex;
    align-items: center;


    &>div {
        width: 3vw;
        height: 3vw;
        margin-left: 1vw;
        margin-right: 1vw;
        border-radius: 3vw;
        background: radial-gradient(#e9e9e95c, rgb(255 255 255));
        line-height: 3vw;
        color: #00ff43;
        cursor: pointer;
        transition: 0.3s all;
    }






    &>div:hover {
        width: 3.5vw;
        height: 3.5vw;
        margin-left: 0.75vw;
        margin-right: 0.75vw;
        background: radial-gradient(circle at bottom, #81e8f6c2, #76deef 10%, #055194 80%, #062745 100%);
    }
}

.path-plan {
    position: absolute;
    width: 10rem;
    height: 4rem;
    z-index: 2;
    display: flex;
    margin-top: 2rem;
    margin-left: 3rem;

    &>span {
        width: 4rem;
        height: 4rem;
        margin: 0 0.5rem;
        border-radius: 4rem;
        background-color: #94929281;
        line-height: 4rem;
        color: #FFFFFF;
        font-size: 1rem;
        cursor: pointer;
        transition: 0.3s all;
    }

    &>span:nth-child(1):hover {
        background-color: #ff3737ab;
    }

    &>span:nth-child(2):hover {
        background-color: #4d4d4dab;
    }
}

.popup {
    position: absolute;
    width: 200px;
    margin-left: -100px;
    margin-top: -115px;
    text-align: left;

    .ol-popup {
        width: auto;
        height: auto;

        border-radius: 5px;
        box-shadow: 0 0 4px #00ffe7;
        color: azure;
        background-color: rgba(0, 37, 54, 0.425);
        padding: 2px;
    }
    .arrow {
        width: 20px;
        height: 20px;
        margin-left: 90px;
        border-style: solid;
        border-width: 10px 10px 10px 10px;
        border-color: #00ffe7 rgba(34, 139, 34, 0) rgba(0, 0, 255, 0.007) rgba(0, 255, 255, 0.021);
    }
}


.c-batch-point{
    position: fixed;
    z-index: 3;
    width: 372px;
    height: 221px;
    background: #FFFFFF;
    border-radius: 5px;
    top: calc(100vh / 2 - 64px);
    left: calc(100vw / 2 - 105px);
    font-size: 14px;
    .c-batch-point-describe{
        font-weight: 400;
        color: #00000073;
        &>:hover{
            color: #00c3ff;
        }
    }
    .c-batch-file{
        position: absolute;
        height: 110px;
        width: 97%;
        top: 6px;
        opacity: 0.2;
        left: 1.5%;
        border: 1px dashed #000;
        &>input{
        position: relative;
        height: 100%;
        width: 100%;
        opacity: 0;
        cursor: pointer;
        }
        
    }
    &>img{
        
        margin: 20px 10px;

    }
    &>.point-a{
        margin: 10px ;
        color: #003A8C;
        text-decoration:underline;
        &>span{
            cursor: pointer;
        }
    }
    .sub-btn{
        width: 100%;
        height: 32px;
        text-align: center;
        span{
            display: inline-block;
            width: 60px;
            height: 32px;
            background: #003A8C;
            border-radius: 2px;
            line-height: 32px;
            margin: 0 10px ;
            cursor: pointer;
            &:nth-child(1){
                
                background: #FFFFFF;
                border-radius: 2px;
                border: 1px solid rgba(0, 0, 0, 0.15);
            }
            &:nth-child(2){
                color: white;
            }
        }

    }
}